import React, { } from "react";
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

export const SS = StyleSheet.create({
  Button: {
    borderRadius: 1.6,
    minHeight: 48,
    flexGrow: 1,
    flexShrink: 0,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  },
  Button_txt: {
    fontSize: 16,
  },
  Button_primary: {
    backgroundColor: "#FFF",
  },
  Button_primary_txt: {
    color: "#0A74E8",
  },
  Button_default: {
    borderWidth: 2,
    borderColor: "#FFF",
    backgroundColor: "transparent",
  },
  Button_default_txt: {
    color: "#FFF",
  },
  Button_blue: {
    borderWidth: 2,
    borderColor: "#0A74E8",
    backgroundColor: "#0A74E8",
  },
  Button_blue_txt: {
    color: "#FFF",
  },
});

export default function Button (props) {

  const { children, style = {}, textStyle = {}, type = "default", disabled = false, ...others } = props;
  const iNeedHelp = children.$$typeof !== Symbol.for('react.element') && !Array.isArray(children);


  const _rootStyle = { ...SS.Button, opacity: disabled ? 0.5 : 1 };
  const _chidStyle = { ...SS.Button_txt };

  if (type === 'default') {
    Object.assign(_rootStyle, SS.Button_default);
    Object.assign(_chidStyle, SS.Button_default_txt);
  }
  if (type === 'primary') {
    Object.assign(_rootStyle, SS.Button_primary);
    Object.assign(_chidStyle, SS.Button_primary_txt);
  }

  if (type === 'blue') {
    Object.assign(_rootStyle, SS.Button_blue);
    Object.assign(_chidStyle, SS.Button_blue_txt);
  }

  const _render = iNeedHelp ? (<Text style={{ ..._chidStyle, ...textStyle }}>{children}</Text>) : children;
  return (
    <TouchableOpacity style={{ ..._rootStyle, ...style }} activeOpacity={0.618} {...others} disabled={disabled}>
      <View>{_render}</View>
    </TouchableOpacity>
  );
}